<template>
    <div class="airContent" @click.stop>
        <div class="airBox" id="airBox">
            <div class="airList" id="airList">
                <div class="airList-hot airList-item0">
                    <div class="airList-item1">
                        <div class="airList-name">热门</div>
                    </div>
                    <div class="airList-item2">
                        <div class="airList-item3" v-for="key in hot"  @click="addData(key)">{{key.airportName}}-{{key.code}}</div>
                    </div>
                    <div class="airList-item4"></div>
                </div>
                <div class="airList-item0" v-for="(key,index) in airport" v-if="key.data.length!=0">
                    <div class="airList-item1">
                        <div class="airList-name">{{key.code}}</div>
                    </div>
                    <div class="airList-item2">
                        <div class="airList-item3" v-for="(oo,oppp) in key.data" @click="addData(oo)">{{oo.airportName}}-{{oo.code}}</div>
                    </div>
                    <div class="airList-item4"></div>
                </div>
            </div>
            <scrollbar1 :das="scrollNode" @click.stop></scrollbar1>
        </div>
    </div>
</template>
<script>
import scrollBar1 from './../component/scrollBarUltimate.vue';
import hot from './../JsonData/hotCity';
export default {
    data(){
        return {
            hot:hot,
            airport:'',
            scrollNode:{
                parent:"airBox",
                child:"airList",
                courseN:"course2",
                sliderN:"slider2",
                speed:60
            },
            shos:1
        }
    },
    mounted(){
        let airData=JSON.parse(sessionStorage.getItem('airportData'));
        console.log( this.airport);
        let arr=[];
        let bl="ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
        for(let i=0;i< bl.length;i++){
            arr.push({
                code:bl[i],
                data:[

                ]
            })
        }
        for(let key in airData){
            for(let j=0;j<airData[key].length;j++){
                for(let i=0;i<arr.length;i++){
                    if(arr[i].code==key){
                        arr[i].data.push(airData[key][j])
                    }
                }
            }
        }
        this.airport=arr;
    },
    components:{
        scrollbar1:scrollBar1
    },
    methods:{
        addData:function (val) {
            this.$emit('mes',val)
        }
    }
}


</script>
<style scoped>
    .airList{
        overflow: hidden;
        position: absolute;
    }
    .airList-hot{
        height:140px;
    }
    .airList-item0{
        margin:5px 0px 5px 0px;
        display: -moz-box;
        display: -webkit-box;
        display: box;
        position: relative;
    }
    .airList-item1{
        width:50px;
    }
    .airList-item2{
        width: 510px;;
    }
    .airList-item3{
        width: 165px;
        height: 30px;
        line-height:30px;
        text-align: left;
        font-size:12px;
        color: white;
        display: inline-block;
    }
    .airList-item4{
        width: 20px;
    }
    .airList-item3:hover{
        background-color:#244573;
        cursor:pointer;
    }
    .airList-name{
        height:30px;
        width:50px;
        line-height:30px;
        text-align:center;
        font-size:12px;
        color:white;
    }


</style>